构建对象Reducer
//todo Reducer
const todo = (state, action) => {
switch (action.type) {
case 'ADD_TODO':
return {
id: action.id,
text: action.text,
completed: false
};
case 'TOGGLE_TODO':
if (state.id !== action.id) {
return state;
}
return {
...state,
completed: !state.completed
};
default:
return state;
}
};
//todos Reducer [数组状态]
const todos = (state = [], action) => {
switch (action.type) {
case 'ADD_TODO':
return [
...state,
todo(undefined, action)
];
case 'TOGGLE_TODO':
return state.map(t => todo(t, action));
default:
return state;
}
};
//visibilityFilter Reducer
const visibilityFilter = (state = 'SHOW_ALL',
action) => {
switch (action.type) {
case 'SET_VISIBILITY_FILTER':
return action.filter;
default:
return state;
}
};
//todoApp Reducer [对象状态]
const todoApp = (state = {}, action) => {
return {
todos: todos(
state.todos,
action
),
visibilityFilter: visibilityFilter(
state.visibilityFilter,
action
)
};
};
const { createStore } = Redux;
const store = createStore(todoApp);
console.log('初始化状态:');
console.log(store.getState());
console.log('--------------');
console.log('触发 ADD_TODO:');
store.dispatch({
type: 'ADD_TODO',
id: 0,
text: 'Learn Redux'
});
console.log('当前状态:');
console.log(store.getState());
console.log('--------------');
console.log('触发 ADD_TODO:');
store.dispatch({
type: 'ADD_TODO',
id: 1,
text: 'Go Shopping'
});
console.log('当前状态:');
console.log(store.getState());
console.log('--------------');
console.log('触发 TOGGLE_TODO');
store.dispatch({
type: 'TOGGLE_TODO',
id: 0
});
console.log('当前状态:');
console.log(store.getState());
console.log('--------------');
console.log('触发 SET_VISIBILITY_FILTER');
store.dispatch({
type: 'SET_VISIBILITY_FILTER',
filter: 'SHOW_COMPLETED'
});
console.log('当前状态:');
console.log(store.getState());
console.log('--------------');
//最终代码: http://jsbin.com/qopatey/edit?js,console